<template>
  <div>
    <!-- 作业列表 -->
    <van-list
      v-model="listLoading"
      :finished="listFinish"
      finished-text="我是有底线的"
    >
      <van-cell-group
        v-for="hw in homeworkList "
        :key="hw.id"
        class="cell-item"
        inset
      >
        <van-cell
          :title="hw.homeworkName"
          is-link
          @click="routeToHomework(hw)"
        >
          <template #icon>
            <svg-icon
              icon-class="hw-default"
              style="margin-right: 10px;"
              :size="40"
            />
          </template>
          <template #label>
            <van-tag
              v-if="hw.status === 0"
              type="warning"
              mark
            >未开始</van-tag>
            <van-tag
              v-if="hw.status === 1"
              type="primary"
              mark
            >进行中</van-tag>
            <van-tag
              v-if="hw.status === 2"
              type="danger"
              mark
            >已结束</van-tag>
          </template>
        </van-cell>
      </van-cell-group>

    </van-list>
  </div>

</template>

<script>
import { List, Cell, CellGroup, Icon, Tag } from 'vant'

export default {
  components: {
    [List.name]: List,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Icon.name]: Icon,
    [Tag.name]: Tag
  },
  props: {
    // { id: 1, homeworkName: '作业一', startTime: '2023-01-01 12:00:00', endTime: '2023-01-01 13:00:00' },
    homeworkList: { type: Array, required: true } // 课程作业列表数据
  },
  data () {
    return {
      listLoading: false, // list是否处于加载状态
      listFinish: true // list是否加载完数据
    }
  },
  methods: {
    routeToHomework (homework) { // 作业详情跳转
      const userType = Number.parseInt(this.$route.query.userType)
      if (userType === 1) {
        this.$router.push({
          name: 'Homework',
          query: {
            homeworkId: homework.id,
            courseId: this.$route.query.courseId,
            userType: this.$route.query.userType
          }
        })
      } else {
        this.$router.push({
          name: 'HomeworkCheck',
          query: {
            homeworkId: homework.id,
            courseId: this.$route.query.courseId,
            userType: this.$route.query.userType
          }
        })
      }
    }
  }
}
</script>

<style scoped>
.cell-item {
  margin-top: 1.2em;
}
</style>
